import React, { Component, Fragment } from 'react';
import { Spin, Row, Col, Card, Steps, Button, Icon, List } from 'antd';
import { connect } from 'dva';
import CancelOnly from './cancelOnly';
import Refuse from './refuse';
import RefuseGoods from './refuseGoods';
import CancelAndAddress from './cancelAndAddress';
import ReceivingGoods from './receivingGoods';
import ReceivingOutlineGoods from './receivingGoodsOutline';
import CancelOnlyOutline from './cancelOnlyOutline';
import styles from './details.less';
import {abs} from '@/utils/utils';
import router from 'umi/router';
const Step = Steps.Step;

class RefundDetails extends Component {
  state = {
    colheight: '345px',
    dataSource: {},
    dataLog: [],
    loading: true,
  }

  componentWillMount() {
     window.Isoption = false;
      this.getDetail(); // 详情
      this.getLog(); // 协商记录
  }

  componentDidMount() {
    window.Isoption = true;
  }

  getDetail=()=> {
    const { dispatch } = this.props;
    const Id = this.props.match.params.id;
    dispatch({
        type: 'orderRight/GetDetail',
        payload: {
            Id: Id
        },
        callBack: {
            success: res => {
                if(res.Code ===0) {
                    this.setState({
                        dataSource: res.Data,
                        loading: false
                    })
                }  
            },
            error: res => {
                console.log(res.Msg)
            }
        }
    })
  }

  getLog=()=> {
    const { dispatch } = this.props;
    const Id = this.props.match.params.id;
    dispatch({
        type: 'orderRight/GetLog',
        payload: {
            Id: Id
        },
        callBack: {
            success: res => {
                if(res.Code ===0) {
                    this.setState({
                        dataLog: res.Data?res.Data:[]
                    })
                }  
            },
            error: res => {
                console.log(res.Msg)
            }
        }
    })
  }

  reftch =() => { // 刷新
    this.getDetail(); 
  }

  // 同意仅退款
  clickCancel =(max, RefundFee) => {
    const width = 640;
    const title = '维权处理';
    const RefundFeeMax = max;
    const Id = this.props.match.params.id;
    this.cancelOnly.show({width, title, RefundFeeMax, RefundFee,Id}, this.reftch)
  }

   // 线下
   clickOutLine =(RefundFee)=> {
    const width = 640;
    const title = '维权处理';
    const Id = this.props.match.params.id;
    this.cancelOnlyOutline.show({width, title, RefundFee,Id}, this.reftch)
}

  // 拒绝
  clickRefuse =(RefundFee) => {
    const width = 640;
    const title = '维权处理';
    const Id = this.props.match.params.id;
    this.refuse.show({width, title,Id, RefundFee}, this.reftch)
  }

  // 同意退款发地址
  clickCancelAndAddress =(max, RefundFee, type) => {
    const title = '维权处理';
    const width = 640;
    const RefundFeeMax = max;
    const Id = this.props.match.params.id;
    this.cancelAndAddress.show({width, title, RefundFeeMax, RefundFee,Id, type}, this.reftch)
  }

  // 确认收货
  clickReceivingGoods=(RefundFee, ReturnAddr)=> {
    const title = '维权处理';
    const width = 640;
    const Id = this.props.match.params.id;
    this.receivingGoods.show({width, title, ReturnAddr, RefundFee,Id}, this.reftch)
  }

  // 线下
  clickOutLineReceivingGoods=(RefundFee, ReturnAddr) => {
        const title = '维权处理';
        const width = 640;
        const Id = this.props.match.params.id;
        this.receivingOutlineGoods.show({width, title, ReturnAddr, RefundFee,Id}, this.reftch)
  }

  // 拒绝收货
  clickRefuseGoods =(RefundFee)=> {
    const title = '维权处理';
    const width = 640;
    const Id = this.props.match.params.id;
    this.refuseGoods.show({width, title, Id, RefundFee}, this.reftch)
  }

  clickMoney=(Id)=> {
    router.replace({
        pathname: `/${window.storeId}/order/refunds/record/${Id}`
    })
  }

  renderState(dataSource) {
    if(dataSource.Status===10) { // 10
    return (
        <div className={styles.statusType}>
            <div className={styles.left}>
                <div className={styles.topText}>等待商家处理退款申请</div>
                <div className={styles.buttomText}>收到买家{dataSource.RefundTypeName}申请，请尽快处理。</div>
            </div>     
            <div>
                {dataSource.RefundTypeName ==='仅退款'?
                    <Button
                        type="primary"
                        onClick={dataSource.PaymentChannel===1?
                            ()=> this.clickCancel(dataSource.RefundFeeMax, dataSource.RefundFee): //微信
                            ()=> this.clickOutLine(dataSource.RefundFeeMax, dataSource.RefundFee) // 线下
                        }
                        style={{marginRight: 8}}
                    >
                        同意退款
                    </Button>
                    :
                    <Button
                        type="primary"
                        onClick={
                            dataSource.PaymentChannel===1?
                            ()=> this.clickCancelAndAddress(dataSource.RefundFeeMax, dataSource.RefundFee):
                            ()=> this.clickCancelAndAddress(dataSource.RefundFeeMax, dataSource.RefundFee, 'type')
                        }
                        style={{marginRight: 8}}
                    >
                        同意申请，发送退货地址
                    </Button>
                }
                <Button onClick={() => this.clickRefuse(dataSource.RefundFee)}>拒绝申请</Button>
            </div>
        </div>
    )
    }
    if(dataSource.Status===5) {
        return (
            <div>
                <div className={styles.topText}>已同意，等待买家发货</div>
                <div className={styles.buttomText}>已同意退款申请，等待买家发货</div>
            </div>
        )
    }
    if(dataSource.Status===30) { // 30
    return (
        <div className={styles.statusType}>
            <div className={styles.left} stylw={{width: 300}}>
                <div className={styles.topText}>已退货，等待商家确认收货</div>
                <div className={styles.buttomText}>{`买家已退货，物流公司：${dataSource.ExpressName}，物流单号：${dataSource.LogisticsNumber}`}</div>
            </div>
            <div>
                <Button type="primary" style={{marginRight: 8}}
                    onClick={
                        dataSource.PaymentChannel===1?
                        ()=> this.clickReceivingGoods(dataSource.RefundFee,dataSource.ReturnAddr):
                        ()=> this.clickOutLineReceivingGoods(dataSource.RefundFee,dataSource.ReturnAddr) //线下
                    }
                    >确认收货并退款</Button>
                <Button onClick={() => this.clickRefuseGoods(dataSource.RefundFee)}>拒绝申请</Button>
            </div>
        </div>
    )
    }
    if(dataSource.Status===40) { //40
        return (
            <div>
                <div className={styles.topText}>退款中</div>
                <div className={styles.buttomText}>已退款，系统处理中</div>
            </div>
        )
    }
    if(dataSource.Status===50) { //50
        return (
            <div>
                <div className={styles.topText}>退款成功</div>
                <div className={styles.buttomText}>
                    {`退款金额：￥${abs(dataSource.RefundFee, 2)}`}
                    <a style={{marginLeft: 8}} onClick={()=> this.clickMoney(dataSource.OrderNo)}>钱款去向</a>
                </div>
            </div>
        )
    }
    if(dataSource.Status===80) { //80
        return (
            <div>
                <div className={styles.topText}>退款关闭</div>
                <div className={styles.buttomText}>用户已取消退款申请</div>
            </div>
        )
    }
    if(dataSource.Status===60) { //60
        return (
            <div>
                <div className={styles.topText}>商家拒绝，退款关闭</div>
                <div className={styles.buttomText}>已拒绝退款</div>
            </div>
        )
    }
  }

  render() {
    const {cdnUrl} = this.props;
    const {dataSource, dataLog, loading} = this.state;
    // console.log(dataSource);
    return (
      <Fragment>
        <Spin spinning={loading}>
          <Card bordered={false} className={styles.Steps}>
            <Steps >
              <Step status='finish' title="买家申请维权" description={dataSource.CreateTime} />
              <Step status={dataSource.Status===10?'process':'finish'} title="商家处理退款申请" description={dataSource.RefundTime} />
              {dataSource.RefundTypeName !=='仅退款'&&<Step
                    status={
                        dataSource.Status===10?'wait':dataSource.Status===5?'process':'finish'
                    }
                    title="买家退货给商家"
                    description={dataSource.ReturnTime}
               />
              }
              <Step status={
                  dataSource.Status===10?'wait':dataSource.Status===5?'wait':dataSource.Status===40?'process':'finish'
                  }
                  title="退款完成"
                  description={dataSource.FinishTime}
               />
            </Steps>
          </Card>
          <Card bordered={false} className={styles.Details}>
            <Row>
              <Col span={8} style={{ height: this.state.colheight }}>
                <p className="title">售后维权</p>
                <p className="xkd-text-ellipsis">退款方式：<b className="ff98">{dataSource.RefundTypeName}</b> </p>
                <p className="xkd-text-ellipsis">退款金额：<span className="ff98">￥{abs(dataSource.RefundFee, 2)}</span></p>
                <p className="xkd-text-ellipsis">维权原因：{dataSource.RefundReason}</p>
                <p className="xkd-text-ellipsis">维权编号：{dataSource.RightsOrderNo}</p>
                <div className="bot">
                  <p className="xkd-text-ellipsis">订单编号：{dataSource.OrderNo}</p>
                  {dataSource.PaymentTime &&<p className="xkd-text-ellipsis">付款时间：{dataSource.PaymentTime}</p>}
                  <p className="xkd-text-ellipsis">买家：{dataSource.MemberName}</p>
                  <p className="xkd-text-ellipsis">运费：￥{abs(dataSource.FreightFee, 2)}</p>
                  <p className="xkd-text-ellipsis">合计优惠：￥{abs(dataSource.DiscountFee, 2)}</p>
                </div>
              </Col>
              <Col span={16} style={{ height: this.state.colheight }}>
                <p className="title">订单状态</p>
                <div className="dashed">
                  <div className="state">
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/icon/order-warn.png'} />
                    {this.renderState(dataSource)}
                  </div>
                </div>
                {/* <div className="note">
                  <p>商家备注：</p>备注信息备注信息备
                </div> */}
              </Col>


            </Row>
          </Card>
          <Card bordered={false} className={styles.Goods}>
            <Row className={styles.GoodsTitle}>
              <Col span={8}>商品信息</Col>
              <Col span={3}>价格</Col>
              <Col span={3}>数量</Col>
              <Col span={3}>优惠</Col>
              <Col span={4}>小计</Col>
              <Col span={3}>状态</Col>
            </Row>
            <List
              itemLayout="vertical"
              split={false}
              size="large"
              dataSource={dataSource.OrderItems?dataSource.OrderItems:[]}
              renderItem={item => (
                <List.Item>
                  {
                    <Fragment>
                      <Row>
                        <Col span={8}>
                          <img src={cdnUrl + '/' + item.ThumbnailUrl} />
                          <p className="xkd-text-ellipsis-2">{item.ProductName}</p>
                          <span>{item.SkuName}</span>
                        </Col>
                        <Col span={3}>￥{abs(item.SingleFee,2)}</Col>
                        <Col span={3}>{item.BuyNum}</Col>
                        <Col span={3}>{item.DiscountFee ? item.DiscountFee : '-'}</Col>
                        <Col span={4}>￥{abs(item.SingleFee*item.BuyNum,2)}</Col>
                        <Col span={3}>{item.RightsSendState}</Col>
                      </Row>
                    </Fragment>
                  }
                </List.Item>
              )}
            />
            <Card
              title="协商记录"
              className="record"
            >
              <Steps
                progressDot
                direction="vertical"
              >
              {dataLog.map((item, index) => {
                  return (
                    <Step
                        key={index}
                        title={
                        <div>
                            {item.Content&& item.Content}
                            {item.Remark&&<span>{item.Remark}</span>}
                        </div>
                        } 
                        description={item.CreateTime}
                    />
                  )
              })}     
              </Steps>
            </Card>
          </Card>

        </Spin>
        <CancelOnly
            ref={e => {
                this.cancelOnly = e;
            }}
        />
        <CancelOnlyOutline
            ref={e => {
                this.cancelOnlyOutline = e;
            }}
        />     
         <Refuse
            ref={e => {
                this.refuse = e;
            }}
        />
         <RefuseGoods
            ref={e => {
                this.refuseGoods = e;
            }}
        />        
        <CancelAndAddress
            ref={e => {
                this.cancelAndAddress =e;
            }}
        />
        <ReceivingGoods
            ref={e => {
                this.receivingGoods = e;
            }}
        />
        <ReceivingOutlineGoods
             ref={e => {
                this.receivingOutlineGoods = e;
            }}
        />
      </Fragment>
    );
  }
}

export default connect(({ orderRight,global }) => ({
  orderRight,
  cdnUrl: global.oemInfo.cdnUrl,
}))(RefundDetails)

